<template>
  <div id="footerpage">
    <div class="space"></div>
    <div class="foot">
      <div class="first"> <div><img :src="img" alt="">优租云，<span>让天下没有强依赖的设备</span></div></div>
      <div class="linkA">
        <a href="/agreement">用户注册和使用协议 </a>
        <a href="/regulation">虚拟机使用规则</a>
        <a href="javascript:void(0)" @click="qustion">用户反馈</a>
        <router-link :to="{name:'survey'}">问卷调查</router-link>
      </div>
      <div class="gs">©2018郑州优租云网络科技有限公司。All Rights Reserved。<a href="http://www.miitbeian.gov.cn">豫ICP备18018005号-3</a> </div>
  </div>
    <!-- dialog用户反馈 -->
  <el-dialog  :visible.sync="feedback" width="482px"  class="fankui">
    <p class="text">用户意见和反馈</p>
    <textarea v-model="text"></textarea>
    <span slot="footer" class="dialog-footer">
      <el-button  type="success" size='small'  @click="subm">提交</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'footerpage',
  data () {
    return {
      img: require('../assets/images/bttom-logo.png'),
      feedback: false,
      text: ''
    };
  },
  mounted () {
    this.$bus.$on('feed', () => {
      this.feedback = true;
    });
  },
  methods: {
    qustion () {
      this.feedback = true;
    },
    subm () {
      if (this.text.trim() === '') {
        this.$message({
          message: '请输入反馈信息',
          type: 'warning'
        });
      } else {
        this.axios.post('crm/feed-back', {
          content: this.text
        })
          .then(({data}) => {
            if (data.code === 200) {
              this.$bus.$emit('feedSucc');
              this.$message({
                message: '提交成功',
                type: 'success'
              });
            } else {
              this.$message({
                message: data.msg,
                type: 'warning'
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
        this.feedback = false;
      }
    }
  }
};
</script>

<style lang="scss">
  #footerpage {
    // 修改样式为定位到底部
    .space {
      height: 160px;
    }
    .foot {
    position: fixed;
    bottom: 0;
    width: 100%;
    height:158px;
    background:rgba(4,11,20,1);
    z-index: 9;
      .first {
          height: 68px;
          display: flex;
          justify-content: center;
          color: white;
          flex-direction: column;
          align-items: center;
          font-size:16px;
          img {
            width: 23px;
            height: 23px;
            vertical-align: middle;
            margin-right: 20px;
          }
      }
      .linkA {
        height: 44px;
        text-align: center;
        a {
          color: white;
          padding-right: 10px;
          padding-left: 10px;
          border-right: 1px solid #10A57D;
          &:hover {
            color: #10A57D;
          }
          &:last-child {
            border-right: none;
          }
        }
      }
      .gs {
        color: white;
        text-align: center;
        a {
          text-decoration: none;
          color: white;
          &:hover {
            color: #10A57D;
          }
        }
      }
    }
    .fankui {
      .text {
        margin-top: -30px;
        margin-bottom: 10px;
        font-size: 18px;
      }
      textarea {
        width: 95%;
        padding: 10px;
        height: 100px;
        border: 1px solid #dcdcdc;
        resize: none;
        outline: none;
        border-radius: 5px;
      }
      .el-dialog__footer {
        text-align: center;
      }
    }
  }
</style>
